<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>极限飞机大战</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: #000;
            overflow: hidden;
            touch-action: none;
            font-family: Arial, sans-serif;
        }
        #gameCanvas {
            display: block;
            margin: 0 auto;
            background: #000;
            cursor: none;
        }
        #uiPanel {
            position: absolute;
            top: 10px;
            left: 10px;
            color: white;
            font-size: 18px;
            background: rgba(0, 0, 0, 0.5);
            padding: 10px;
            border-radius: 5px;
            user-select: none;
        }
        #controls {
            position: absolute;
            bottom: 10px;
            left: 10px;
            color: white;
            background: rgba(0, 0, 0, 0.5);
            padding: 10px;
            border-radius: 5px;
            user-select: none;
        }
        #gameOver {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: red;
            font-size: 48px;
            font-weight: bold;
            display: none;
            text-align: center;
        }
        #winScreen {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #4CAF50;
            font-size: 48px;
            font-weight: bold;
            display: none;
            text-align: center;
        }
        #awesomeText {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #FFEB3B;
            font-size: 72px;
            font-weight: bold;
            text-shadow: 0 0 20px #FF5722;
            display: none;
            animation: pulse 0.5s infinite alternate;
        }
        #restartBtn {
            margin-top: 20px;
            padding: 10px 20px;
            font-size: 20px;
            background: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        .key {
            display: inline-block;
            width: 30px;
            height: 30px;
            background: #333;
            color: white;
            text-align: center;
            line-height: 30px;
            border-radius: 5px;
            margin: 0 5px;
        }
        @keyframes pulse {
            from { transform: translate(-50%, -50%) scale(1); }
            to { transform: translate(-50%, -50%) scale(1.2); }
        }
    </style>
</head>
<body>
    <div id="uiPanel">
        分数: <span id="score">0</span> | 
        生命: <span id="lives">3</span> |
        等级: <span id="level">1</span>
    </div>
    <canvas id="gameCanvas" width="480" height="640"></canvas>
    <div id="controls">
        <div>
            <span class="key">W</span>
            <span class="key">A</span>
            <span class="key">S</span>
            <span class="key">D</span> 移动飞机
        </div>
        <div style="margin-top: 5px;">
            <span class="key">J</span> 射击 | 
            <span class="key">K</span> 炸弹
        </div>
    </div>
    <div id="gameOver">
        游戏结束!<br>
        最终得分: <span id="finalScore">0</span><br>
        <button id="restartBtn">重新开始</button>
    </div>
    <div id="winScreen">
        通关!<br>
        最终得分: <span id="winScore">0</span><br>
        <button id="winRestartBtn">再玩一次</button>
    </div>
    <div id="awesomeText">牛逼!</div>

    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        const scoreElement = document.getElementById('score');
        const livesElement = document.getElementById('lives');
        const levelElement = document.getElementById('level');
        const gameOverElement = document.getElementById('gameOver');
        const winScreenElement = document.getElementById('winScreen');
        const finalScoreElement = document.getElementById('finalScore');
        const winScoreElement = document.getElementById('winScore');
        const restartBtn = document.getElementById('restartBtn');
        const winRestartBtn = document.getElementById('winRestartBtn');
        const awesomeText = document.getElementById('awesomeText');

        const game = {
            score: 0,
            lives: 3,
            level: 1,
            isOver: false,
            enemySpawnRate: 0.03,
            enemySpeed: 2,
            enemyHealth: 1,
            frameCount: 0,
            lastAwesome: 0
        };

        const player = {
            x: canvas.width / 2 - 25,
            y: canvas.height - 100,
            width: 50,
            height: 50,
            speed: 5,
            shootCooldown: 0,
            invincible: 0,
            isAlive: true
        };

        const bullets = [];
        const enemies = [];
        const explosions = [];
        const particles = [];
        const enemyBullets = [];

        const keys = {
            w: false,
            a: false,
            s: false,
            d: false,
            j: false,
            k: false
        };

        function initGame() {
            game.score = 0;
            game.lives = 3;
            game.level = 1;
            game.isOver = false;
            game.enemySpawnRate = 0.03;
            game.enemySpeed = 2;
            game.enemyHealth = 1;
            game.frameCount = 0;
            game.lastAwesome = 0;
            
            player.x = canvas.width / 2 - 25;
            player.y = canvas.height - 100;
            player.shootCooldown = 0;
            player.invincible = 0;
            player.isAlive = true;
            
            bullets.length = 0;
            enemies.length = 0;
            explosions.length = 0;
            particles.length = 0;
            enemyBullets.length = 0;
            
            updateUI();
            gameOverElement.style.display = 'none';
            winScreenElement.style.display = 'none';
        }

        function updateUI() {
            scoreElement.textContent = game.score;
            livesElement.textContent = game.lives;
            levelElement.textContent = game.level;
        }

        function gameLoop() {
            if (!game.isOver && game.score < 10000) {
                update();
                render();
                game.frameCount++;
                
                if (game.frameCount % 1000 === 0) {
                    increaseDifficulty();
                }
                
                if (game.score >= 1000 && game.score - game.lastAwesome >= 1000) {
                    showAwesomeText();
                    game.lastAwesome = game.score;
                }
                
                if (game.score >= 10000) {
                    winGame();
                    return;
                }
                
                requestAnimationFrame(gameLoop);
            }
        }

        function increaseDifficulty() {
            game.level++;
            game.enemySpawnRate = Math.min(0.15, game.enemySpawnRate + 0.01);
            game.enemySpeed = Math.min(8, game.enemySpeed + 0.5);
            game.enemyHealth = Math.min(5, game.enemyHealth + 0.2);
            updateUI();
        }

        function showAwesomeText() {
            awesomeText.style.display = 'block';
            setTimeout(() => {
                awesomeText.style.display = 'none';
            }, 500);
        }

        function update() {
            updatePlayer();
            updateBullets();
            updateEnemies();
            updateEnemyBullets();
            updateExplosions();
            spawnEnemies();
        }

        function updatePlayer() {
            if (!player.isAlive) return;
            
            if (keys.a && player.x > 0) player.x -= player.speed;
            if (keys.d && player.x < canvas.width - player.width) player.x += player.speed;
            if (keys.w && player.y > 0) player.y -= player.speed;
            if (keys.s && player.y < canvas.height - player.height) player.y += player.speed;
            
            if (player.shootCooldown > 0) player.shootCooldown--;
            if (player.invincible > 0) player.invincible--;
            
            if (keys.j && player.shootCooldown <= 0) {
                shootBullet();
                player.shootCooldown = 10;
            }
            
            if (keys.k) {
                shootBomb();
            }
        }

        function shootBullet() {
            bullets.push({
                x: player.x + player.width / 2 - 3,
                y: player.y,
                width: 6,
                height: 15,
                speed: 10,
                damage: 1,
                color: '#ffeb3b'
            });
        }

        function shootBomb() {
            for (let i = 0; i < 360; i += 30) {
                bullets.push({
                    x: player.x + player.width / 2 - 4,
                    y: player.y,
                    width: 8,
                    height: 8,
                    speed: 5,
                    angle: i * Math.PI / 180,
                    damage: 1,
                    color: '#ff5722'
                });
            }
        }

        function updateBullets() {
            for (let i = bullets.length - 1; i >= 0; i--) {
                const bullet = bullets[i];
                
                if (bullet.angle !== undefined) {
                    bullet.x += Math.cos(bullet.angle) * bullet.speed;
                    bullet.y += Math.sin(bullet.angle) * bullet.speed;
                } else {
                    bullet.y -= bullet.speed;
                }
                
                if (bullet.y < -bullet.height || 
                    bullet.x < -bullet.width || 
                    bullet.x > canvas.width ||
                    bullet.y > canvas.height) {
                    bullets.splice(i, 1);
                }
            }
        }

        function spawnEnemies() {
            if (Math.random() < game.enemySpawnRate) {
                enemies.push({
                    x: Math.random() * (canvas.width - 40),
                    y: -40,
                    width: 40,
                    height: 40,
                    speed: game.enemySpeed + Math.random() * 2,
                    health: Math.ceil(game.enemyHealth),
                    shootCooldown: Math.floor(Math.random() * 100) + 100,
                    lastShootTime: 0
                });
            }
        }

        function updateEnemies() {
            for (let i = enemies.length - 1; i >= 0; i--) {
                const enemy = enemies[i];
                enemy.y += enemy.speed;
                enemy.lastShootTime++;
                
                if (enemy.lastShootTime >= enemy.shootCooldown) {
                    enemyBullets.push({
                        x: enemy.x + enemy.width / 2 - 3,
                        y: enemy.y + enemy.height,
                        width: 6,
                        height: 15,
                        speed: 5,
                        damage: 1,
                        color: '#ff3333'
                    });
                    enemy.lastShootTime = 0;
                    enemy.shootCooldown = Math.floor(Math.random() * 100) + 100;
                }
                
                if (enemy.y > canvas.height) {
                    enemies.splice(i, 1);
                    if (player.invincible <= 0 && player.isAlive) {
                        game.lives--;
                        player.invincible = 30;
                        if (game.lives <= 0) {
                            gameOver();
                        }
                    }
                    continue;
                }
                
                if (player.invincible <= 0 && player.isAlive && checkCollision(player, enemy)) {
                    enemies.splice(i, 1);
                    game.lives--;
                    player.invincible = 30;
                    createExplosion(enemy.x + enemy.width / 2, enemy.y + enemy.height / 2);
                    if (game.lives <= 0) {
                        gameOver();
                    }
                    continue;
                }
                
                for (let j = bullets.length - 1; j >= 0; j--) {
                    const bullet = bullets[j];
                    if (checkCollision(bullet, enemy)) {
                        enemy.health -= bullet.damage;
                        bullets.splice(j, 1);
                        
                        if (enemy.health <= 0) {
                            enemies.splice(i, 1);
                            game.score += 100 * game.level;
                            createExplosion(enemy.x + enemy.width / 2, enemy.y + enemy.height / 2);
                            break;
                        }
                    }
                }
            }
        }

        function updateEnemyBullets() {
            for (let i = enemyBullets.length - 1; i >= 0; i--) {
                const bullet = enemyBullets[i];
                bullet.y += bullet.speed;
                
                if (bullet.y > canvas.height) {
                    enemyBullets.splice(i, 1);
                    continue;
                }
                
                if (player.invincible <= 0 && player.isAlive && checkCollision(player, bullet)) {
                    enemyBullets.splice(i, 1);
                    game.lives--;
                    player.invincible = 30;
                    if (game.lives <= 0) {
                        gameOver();
                    }
                }
            }
        }

        function createExplosion(x, y) {
            explosions.push({
                x: x,
                y: y,
                radius: 0,
                maxRadius: 30,
                alpha: 1
            });
            
            for (let i = 0; i < 20; i++) {
                particles.push({
                    x: x,
                    y: y,
                    radius: Math.random() * 3 + 1,
                    color: `rgba(255, ${Math.floor(Math.random() * 156) + 100}, 0, 1)`,
                    vx: Math.random() * 6 - 3,
                    vy: Math.random() * 6 - 3,
                    alpha: 1
                });
            }
        }

        function updateExplosions() {
            for (let i = explosions.length - 1; i >= 0; i--) {
                const explosion = explosions[i];
                explosion.radius += 1;
                explosion.alpha -= 0.02;
                
                if (explosion.alpha <= 0) {
                    explosions.splice(i, 1);
                }
            }
            
            for (let i = particles.length - 1; i >= 0; i--) {
                const particle = particles[i];
                particle.x += particle.vx;
                particle.y += particle.vy;
                particle.alpha -= 0.01;
                
                if (particle.alpha <= 0) {
                    particles.splice(i, 1);
                }
            }
        }

        function checkCollision(obj1, obj2) {
            return obj1.x < obj2.x + obj2.width &&
                   obj1.x + obj1.width > obj2.x &&
                   obj1.y < obj2.y + obj2.height &&
                   obj1.y + obj1.height > obj2.y;
        }

        function gameOver() {
            game.isOver = true;
            player.isAlive = false;
            finalScoreElement.textContent = game.score;
            gameOverElement.style.display = 'block';
        }

        function winGame() {
            game.isOver = true;
            winScoreElement.textContent = game.score;
            winScreenElement.style.display = 'block';
        }

        function render() {
            ctx.fillStyle = '#000';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            
            for (const bullet of bullets) {
                ctx.fillStyle = bullet.color;
                ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
            }
            
            for (const bullet of enemyBullets) {
                ctx.fillStyle = bullet.color;
                ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
            }
            
            for (const enemy of enemies) {
                ctx.fillStyle = '#e74c3c';
                ctx.beginPath();
                ctx.moveTo(enemy.x + 20, enemy.y + 40);
                ctx.lineTo(enemy.x, enemy.y);
                ctx.lineTo(enemy.x + 40, enemy.y);
                ctx.closePath();
                ctx.fill();
                
                ctx.fillStyle = '#c0392b';
                ctx.beginPath();
                ctx.moveTo(enemy.x + 15, enemy.y + 25);
                ctx.lineTo(enemy.x + 25, enemy.y + 25);
                ctx.lineTo(enemy.x + 20, enemy.y + 35);
                ctx.closePath();
                ctx.fill();
            }
            
            if (player.isAlive) {
                if (player.invincible > 0 && Math.floor(Date.now() / 100) % 2 === 0) {
                } else {
                    ctx.fillStyle = '#3498db';
                    ctx.beginPath();
                    ctx.moveTo(player.x + 25, player.y);
                    ctx.lineTo(player.x + 50, player.y + 50);
                    ctx.lineTo(player.x + 25, player.y + 40);
                    ctx.lineTo(player.x, player.y + 50);
                    ctx.closePath();
                    ctx.fill();
                    
                    ctx.fillStyle = '#2980b9';
                    ctx.beginPath();
                    ctx.moveTo(player.x + 20, player.y + 15);
                    ctx.lineTo(player.x + 30, player.y + 15);
                    ctx.lineTo(player.x + 25, player.y + 30);
                    ctx.closePath();
                    ctx.fill();
                }
            }
            
            for (const explosion of explosions) {
                const gradient = ctx.createRadialGradient(
                    explosion.x, explosion.y, 0,
                    explosion.x, explosion.y, explosion.radius
                );
                gradient.addColorStop(0, `rgba(255, 200, 0, ${explosion.alpha})`);
                gradient.addColorStop(1, `rgba(255, 50, 0, 0)`);
                
                ctx.fillStyle = gradient;
                ctx.beginPath();
                ctx.arc(explosion.x, explosion.y, explosion.radius, 0, Math.PI * 2);
                ctx.fill();
            }
            
            for (const particle of particles) {
                ctx.fillStyle = particle.color.replace('1)', `${particle.alpha})`);
                ctx.beginPath();
                ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2);
                ctx.fill();
            }
        }

        document.addEventListener('keydown', (e) => {
            if (e.key.toLowerCase() in keys) {
                keys[e.key.toLowerCase()] = true;
                e.preventDefault();
            }
        });

        document.addEventListener('keyup', (e) => {
            if (e.key.toLowerCase() in keys) {
                keys[e.key.toLowerCase()] = false;
                e.preventDefault();
            }
        });

        restartBtn.addEventListener('click', () => {
            initGame();
            gameLoop();
        });

        winRestartBtn.addEventListener('click', () => {
            initGame();
            gameLoop();
        });

        initGame();
        gameLoop();
    </script>
</body>
</html>